4
4
.
.
1
1
.
.
7
7
V
V
i
i
d
d
e
e
o
o
C
C
o
o
n
n
t
t
r
r
o
o
l
l
l
l
e
e
r
r
(
(
A
A
V
V
K
K
i
i
t
t
-
-
d
d
e
e
f
f
a
a
u
u
l
l
t
t
c
c
o
o
n
n
t
t
r
r
o
o
l
l
s
s
)
)
I
I
n
n
f
f
o
o
SwiftUI does not have a View for playing videos so we have to reuse AVPlayer View from UIKit.
This is done by wrapping it around UIViewControllerRepresentable & UIViewRepresentable.
In this tutorial we will show how to use AVPlayerViewController (from AVKit) which adds default controls to the Video.
It will be wrapped in a separate file PlayerView.swift just like in a Video (no default controls).
This way you can use both solutions in the same way depending if you want to have default controls or not.
Video Controller
Content
Wrapper around AVKit
Play from URL
Play from local Video
Add custom controls
Errors
Video Player is blank
App Transport Security has blocked a cleartext HTTP
No factory registered for id
nw_endpoint_flow_copy_multipath_subflow_counts Called on non-Multipath connection
W
W
r
r
a
a
p
p
p
p
e
e
r
r
a
a
r
r
o
o
u
u
n
n
d
d
A
A
V
V
K
K
i
i
t
t
In this example we create PlayerView.swift File in which we create PlayerView asa wrappr around AVPlayer.
This will allow us to use PlayerView to pla Video while ignoring the wrapper code that was needed to make it work.
PlayerView.swift
import SwiftUI
import AVKit
//================================================================================
// STRUCT: PlayerView
//================================================================================
struct PlayerView: UIViewControllerRepresentable {
let player: AVPlayer
func makeUIViewController(context: UIViewControllerRepresentableContext<PlayerView>) ->
AVPlayerViewController {
let controller = AVPlayerViewController()
controller.player = player
return controller
}
public func updateUIViewController(_ uiViewController: AVPlayerViewController, context:
UIViewControllerRepresentableContext<PlayerView>) {}
}
P
P
l
l
a
a
y
y
f
f
r
r
o
o
m
m
U
U
R
R
L
L
[
[
R
R
]
]
ContentView.swift
import SwiftUI
import AVKit
//================================================================================
// STRUCT: ContentView
//================================================================================
struct ContentView: View {
var player = AVPlayer(url: URL(string: "https://ivoronline.com/BachataBasic.mp4")!)
var body: some View {
PlayerView(player: player)
}
}
P
P
l
l
a
a
y
y
f
f
r
r
o
o
m
m
l
l
o
o
c
c
a
a
l
l
V
V
i
i
d
d
e
e
o
o
[
[
R
R
]
]
(Drag & Drop Pexels.mp4 from Finder into your project)
(Select checkboxes as shown in below image)
Finish
(The only difference in code from Play from URL are highlighted lines which look for Video locally)
(You can also place video in subfolder using: RC on TestVideo7 - New Group)
Add Video Added Video
ContentView.swift
import SwiftUI
import AVKit
//================================================================================
// STRUCT: ContentView
//================================================================================
struct ContentView: View {
var player = AVPlayer(url: Bundle.main.url(forResource: "Pexels", withExtension: "mp4")!)
var body: some View {
PlayerView(player: player)
}
}
A
A
d
d
d
d
c
c
u
u
s
s
t
t
o
o
m
m
c
c
o
o
n
n
t
t
r
r
o
o
l
l
s
s
In this example we add our own controls to Play / Pause Video.
ContentView.swift
import SwiftUI
import AVKit
struct ContentView: View {
var player = AVPlayer(url: Bundle.main.url(forResource: "Pexels", withExtension: "mp4")!)
var body: some View {
VStack {
PlayerView(player: player)
Button("Play" ) { self.player.play () }
Button("Pause") { self.player.pause() }
}
}
}
C
C
o
o
n
n
t
t
r
r
o
o
l
l
l
l
e
e
r
r
V
V
i
i
e
e
w
w
In this example we will change the code a bit to make better distinction between Controller and Player.
This will also allow us to have references to both of them.
Wrapper inside ControllerView.swift will be simplified so that all of the code is in ContentView.swift.
ControllerView.swift
import SwiftUI
import AVKit
struct ControllerView: UIViewControllerRepresentable {
let controller : AVPlayerViewController
func makeUIViewController(context: UIViewControllerRepresentableContext<ControllerView>) ->
AVPlayerViewController {
return controller
}
public func updateUIViewController(_ uiViewController: AVPlayerViewController, context:
UIViewControllerRepresentableContext<ControllerView>) {}
}
ContentView.swift
import SwiftUI
import AVKit
struct ContentView: View {
var player = AVPlayer(url: Bundle.main.url(forResource: "Pexels", withExtension: "mp4")!)
var controller = AVPlayerViewController()
init() { controller.player = player }
var body: some View {
ControllerView(controller: controller)
}
}
